<template>
  <div class="city" id="map_container"></div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

import gcoord from "gcoord";

onMounted(drawMap);

let map: any = null;
function drawMap() {
  // map = new BMapGL.Map("map_container");
  // map.enableScrollWheelZoom();
  // map.setTilt(80);
  // map.setHeading(-45.3);
  // map.centerAndZoom(new BMapGL.Point(121.480519, 31.220787), 14);
  // map.addEventListener("tilesloaded", function () {
  //   console.log("地图加载完成！");
  //   start();
  // });

  var panorama = new BMapGL.Panorama('map_container');
	panorama.setPosition(new BMapGL.Point(121.480519, 31.220787));
	var panoramaService = new BMapGL.PanoramaService();
	panoramaService.getPanoramaByLocation(new BMapGL.Point(120.31, 31.58), function(data){
		
	});
}

async function start() {
  var view = new mapvgl.View({
    // effects: [new mapvgl.BloomEffect(), new mapvgl.BlurEffect(), new mapvgl.DepthEffect()],
    map: map,
  });

  const res1 = await fetch("/json/1.json");
  const res = await res1.json();

  //  * 坐标常量说明：
  //  * COORDINATES_WGS84 = 1, WGS84坐标
  //  * COORDINATES_WGS84_MC = 2, WGS84的平面墨卡托坐标
  //  * COORDINATES_GCJ02 = 3，GCJ02坐标
  //  * COORDINATES_GCJ02_MC = 4, GCJ02的平面墨卡托坐标
  //  * COORDINATES_BD09 = 5, 百度bd09经纬度坐标
  //  * COORDINATES_BD09_MC = 6，百度bd09墨卡托坐标
  var shaperLayer = new mapvgl.ShapeLayer({
    texture: "/images/wall2.png",
    isTextureFull: true,
    textureScale: 0.05,
    topColor: "rgba(39, 50, 85, 1.0)",
    opacity: 1.0,
  });
  const polygons1 = [];
  for (let i = 0; i < res.features.length; i++) {
    const item = res.features[i];
    item.properties.height = item.properties.h;

    if (item.geometry.coordinates?.[0]?.length) {
      const pointer = await translate2(item.geometry.coordinates[0]);

      item.geometry.coordinates[0] = pointer;
    }
    polygons1.push(item);
  }

  view.addLayer(shaperLayer);
  shaperLayer.setData(polygons1);
}



function translate2(lng) {
  //   console.log(lng);
  let list = [];
  lng?.forEach((item) => {
    // WGS84坐标系
    const wgs84 = "EPSG:4326";
    // BD-09坐标系
    const bd09 = "EPSG:3807";

    // WGS84坐标点（经度、纬度）
    const wgsPoint = [item[0], item[1]];
    list.push(
      gcoord.transform(
        wgsPoint, // 经纬度坐标
        gcoord.GCJ02, // 当前坐标系
        gcoord.BD09 // 目标坐标系
      )
    );
  });
  return new Promise((resolve) => {
    resolve(list);
  });
}
</script>

<style lang="scss" scoped>
.city {
  height: 100%;
}
</style>
